<template>
  <div class="box">
    <header class="header">
      <ul>
        <router-link tag="li" to="/kind">
          <van-icon name="wap-nav" size="18"/>
        </router-link>
        <li>
          <div class="searchBox">商务休闲鞋</div>
        </li>
        <router-link tag="li" to="/user" v-if="isLogin">我的</router-link>
        <router-link tag="li" to="/login" v-else>登录</router-link>
      </ul>
    </header>
    <div class="content" ref="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item of bannerList" :key="item.bannerid">
            <van-image
              fit="cover"
              :src="item.img"
            />
          </van-swipe-item>
        </van-swipe>
        <!-- nav导航 -->
        <van-grid :column-num="5" :border="false">
          <van-grid-item v-for="item of navlist" :key="item.navid" :icon="item.imgurl" :text="item.title" />
        </van-grid>
        <!-- 秒杀列表 -->
        <van-row gutter="10">
          <van-col span="4" v-for="item of seckillList" :key="item.proid">
            <van-image :src="item.img1"></van-image>
            <p style="font-size: 12px;color:#f66">{{ item.originprice * item.discount / 100 }}</p>
            <p style="font-size: 12px;color:#999"><del>{{ item.originprice | priceFilter }}</del></p>
          </van-col>
        </van-row>
        <!-- 产品列表 -->
        <!-- 父子组件传值 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="我也是有底线的"
          :immediate-check="false"
          @load="onLoad"
        >
          <ProList :proList="proList"/>
        </van-list>
      </van-pull-refresh>
      <div class="backtop" v-if="flag" @click="backtop">
        <van-icon name="back-top" size="36" />
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Grid, GridItem, Image as VanImage, Icon, Col, Row, List, PullRefresh } from 'vant'
import { getBannerList, getSeckillList, getProList } from './../../api/home'
import ProList from './../../components/ProList'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(VanImage)
Vue.use(Col)
Vue.use(Row)
Vue.use(List)
Vue.use(Icon)
Vue.use(PullRefresh)
export default {
  computed: {
    isLogin () {
      return this.$store.state.isLogin
    }
  },
  components: {
    ProList
  },
  data () {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      count: 2, // 默认的页数为1，mounted 中已经有第一页的数据了，下一次从第2页开始
      flag: false, // 控制返回顶部按钮显示还是不显示
      bannerList: [],
      seckillList: [],
      proList: [],
      navlist: [
        { navid: 1, title: '嗨购超市', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png' },
        { navid: 2, title: '数码电器', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg' },
        { navid: 3, title: '嗨购服饰', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg' },
        { navid: 4, title: '嗨购生鲜', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg' },
        { navid: 5, title: '嗨购到家', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg' },
        { navid: 6, title: '充值缴费', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg' },
        { navid: 7, title: '9.9元拼', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg' },
        { navid: 8, title: '领券', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg' },
        { navid: 9, title: '领金贴', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg' },
        { navid: 10, title: 'plus会员', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg' }
      ]
    }
  },
  methods: {
    backtop () {
      this.$refs.content.scrollTop = 0
    },
    onRefresh () {
      console.log('刷新数据')
      this.isLoading = true
      getProList().then(res => {
        this.isLoading = false
        // 重置数据
        this.proList = res.data.data
        this.finished = false
        this.count = 2
      })
    },
    onLoad () {
      console.log('加载数据')
      this.loading = true // 加载数据
      getProList({ count: this.count }).then(res => {
        this.loading = false // 加载完毕
        if (res.data.data.length === 0) { // 当前页没有数据了
          this.finished = true
        } else { // 拼接数据
          // 所谓的拼接，其实本质就是数组的合并 concat
          this.proList = [...this.proList, ...res.data.data]
          this.count++ // 页码加1
        }
      })
    }
  },
  mounted () {
    getBannerList().then(res => {
      // console.log(res)
      this.bannerList = res.data.data
    })
    getSeckillList().then(res => {
      console.log(res.data.data)
      this.seckillList = res.data.data
    })
    getProList().then(res => {
      this.proList = res.data.data
      // 监听滚动条的变化，为什么在请求列表完成以后去监听
      // 为什么使用箭头函数
      this.$refs.content.addEventListener('scroll', () => {
        this.flag = this.$refs.content.scrollTop > 300
      }, false)
    })
  }
}
</script>

<style lang="stylus">
.my-swipe
  height 150px
// 审查元素得知图片容器的样式
.van-image
  width 100%
  img
    width 100%
.backtop
  position fixed
  bottom 60px
  right 10px
  background-color #fff
  border-radius 50%
.header
  ul
    height 100%
    display flex
    li
      height 100%
      display flex
      justify-content center
      align-items center
      color #fff
      &:nth-child(1), &:nth-child(3)
        width 50px
      &:nth-child(2)
        flex 1
        .searchBox
          width 96%
          height 0.3rem
          background-color #fff
          border-radius 15px
          padding-left  24px
          line-height 0.3rem
          color #999

</style>
